<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Birds Flying</title>
  <style>
    canvas {
      position: relative;
      width: 500px;
      height: 500px;
      background: black;
    }
  </style>
</head>
<body>
    <div>sprites: <span id="spriteCount">0</span></div>
  <canvas id="gameCanvas" width="800" height="800"></canvas>
  <script type="text/javascript" src="js/cocos2d-js-v3.13.js" charset="UTF-8"></script>
  <script type="text/javascript">
    function place(sprite) {
      let size = cc.director.getWinSize();
      sprite.setPosition(size.width / 2, size.height / 2);
      sprite.anchor = [0.5, 0.5]
      randomMove(sprite);
      spriteCount.innerHTML = Number(spriteCount.innerHTML) + 1;
      return sprite;
    }

    function randomMove(sprite) {
      const ang = Math.random() * 2 * Math.PI;
      const {x: x0, y: y0} = sprite;
      let {width, height} = cc.director.getWinSize();
      const x1 =  width / 2 + 350 * Math.cos(ang);
      const y1 =  height / 2 + 350 * Math.sin(ang);
      const distance = Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2);

      const startTime = Date.now(),
      T = 5 * distance + 100;
  
      requestAnimationFrame(function f() {
        let p = (Date.now() - startTime) / T;
        p = Math.min(1.0, p);
        sprite.x = x0 + p * (x1 - x0);
        sprite.y = y0 + p * (y1 - y0);
        sprite.rotation = 720 * p;
        if(p < 1){
          requestAnimationFrame(f);
        } else {
          setTimeout(() => {
            randomMove(sprite);
          }, 500)
        } 
      }) 
    }

    window.onload = function(){
        cc.game.onStart = function(){
            //load resources
            cc.LoaderScene.preload([], function () {
              const MyScene = cc.Scene.extend({
                  onEnter:function () {
                    this._super();
                    const fglayer = new FgLayer();
                    this.addChild(fglayer, 1);
                    const bglayer = new BgLayer();
                    this.addChild(bglayer);
                  }
              });
              const FgLayer = cc.Layer.extend({
                  ctor:function () {
                    this._super();
                    return true;
                  },
                  onEnter: function() {
                    this._super();
                    function crateNode() {
                      let drawNode = new cc.DrawNode();
                      drawNode.clear();
                      drawNode.drawDot(cc.p(0, 0), 10, cc.color(0, 0, 0, 255));
                      drawNode.drawDot(cc.p(-20, 0), 10, cc.color(0, 0, 0, 255));
                      drawNode.drawDot(cc.p(20, 0), 10, cc.color(0, 0, 0, 255));
                      drawNode.drawDot(cc.p(0, 20), 10, cc.color(0, 0, 0, 255));
                      drawNode.drawDot(cc.p(0, -20), 10, cc.color(0, 0, 0, 255));
                      return drawNode;
                    }
                    this.addChild(place(crateNode()), 0);
                    gameCanvas.addEventListener('click', evt => {
                      this.addChild(place(crateNode()), 0);
                    })
                  }
              });
              const BgLayer = cc.Layer.extend({
                ctor:function () {
                    this._super();
                    return true;
                  },
                  onEnter: function() {
                    let drawNode = new cc.DrawNode();
                    drawNode.clear();
                    drawNode.drawDot(cc.p(400, 400), 400, cc.color(17, 51, 153, 128));
                    this.addChild(drawNode, 0);
                  }
              });
              cc.director.runScene(new MyScene());
            }, this);
        };
        cc.game.run("gameCanvas");
    };
  </script>
</body>
</html>